<!--
  超级管理员主界面
  创建时间：2025-09-17
  作者：开发团队
  目的：超级管理员功能总览和操作入口
-->

<template>
  <CommonLayout>
    <template #sidebar>
      <SuperAdminSidebar :active-menu="activeTab" @menu-select="setActiveTab" />
    </template>
    
    <div class="superadmin-dashboard">
      <component :is="currentComponent" />
    </div>
  </CommonLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import CommonLayout from '@/components/common/CommonLayout.vue'
import SuperAdminSidebar from '@/components/superadmin/SuperAdminSidebar.vue'
// 导入超级管理员组件
import SystemManagement from '@/components/superadmin/SystemManagement.vue'
import Statistics from '@/components/superadmin/Statistics.vue'
import DataPackageGeneration from '@/components/superadmin/DataPackageGeneration.vue'
import SystemMonitoring from '@/components/superadmin/SystemMonitoring.vue'

// 当前激活的标签页
const activeTab = ref('system')

// 组件映射
const componentMap: Record<string, any> = {
  system: SystemManagement,
  statistics: Statistics,
  packages: DataPackageGeneration,
  monitoring: SystemMonitoring
}

// 当前显示的组件
const currentComponent = computed(() => {
  return componentMap[activeTab.value] || SystemManagement
})

/**
 * 设置激活的标签页
 * :param tab: 标签页标识
 */
const setActiveTab = (tab: string): void => {
  activeTab.value = tab
}
</script>

<style scoped>
.superadmin-dashboard {
  height: 100%;
}
</style>